<template>
    <div class="business-insurance">
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" style="width: 150px">
                        <el-select v-model="listParam.timeId" filterable placeholder="请选择到期时间">
                            <el-option
                                v-for="item in timeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="open-width" style="width: 120px">
                        <el-select v-model="listParam.modeId" filterable placeholder="请选择车型">
                            <el-option
                                v-for="item in modelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    
                    <div class="open-width">
                        <el-input v-model="listParam.keyword" @keyup.enter.native="searchFunc" placeholder="搜索厂牌型号、车牌号"></el-input>
                    </div>
                    <el-button type="primary" @click="searchFunc">搜索</el-button>
                    <el-button type="primary" @click="resetList">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="danger" @click="handleAllConfirm">批量处理</el-button>
                </div>
            </div>

            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table
                    :data="listData"
                    fixed
                    border
                    max-height="600"
                    @selection-change="tableSelectionChange"
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                        fixed>
                    </el-table-column>
                    <el-table-column
                        prop="brand"
                        label="厂牌型号"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="number"
                        label="车牌号"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="type_name"
                        label="车型"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="车辆性质"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.property === 1 ? '职务配车' : '公务用车'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="dead_line"
                        label="到期时间"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="状态"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{stateList[scope.row.status - 1]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        :width="160">
                        <template slot-scope="scope">
                            <el-button @click="handleInsurance(scope.row)" type="text">处理</el-button>
                            <el-button @click="resetTime(scope.row)" type="text">重设时间</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="table-pagination" v-show="totalNumber > 10">
                    <el-pagination
                        @size-change="changeCurrentSize"
                        @current-change="changeCurrentPage"
                        :current-page="listParam.pageIndex"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalNumber">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog
            title="保险处理"
            class="handle-insurance"
            width="440px"
            :visible.sync="insuranceVisible"
            :close-on-click-modal="false">
            <span class="renewal">续期：</span>
            <el-input-number 
                class="input-number-text"
                v-model="insuranceParam.date" 
                controls-position="right" 
                @change="changeDate"
                :min="1" 
                :precision="0">
            </el-input-number>年
            <br>
            <span>下次提醒：</span>
            <el-input-number 
                class="input-number-text"
                style="width: 80px"
                v-model="insuranceParam.year" 
                controls-position="right" 
                :min="1" 
                :precision="0">
            </el-input-number>年
            <el-input-number 
                class="input-number-text"
                v-model="insuranceParam.month" 
                controls-position="right" 
                :min="1" 
                :max="12" 
                :precision="0">
            </el-input-number>月
            <el-input-number 
                class="input-number-text"
                v-model="insuranceParam.day" 
                controls-position="right" 
                :min="1" 
                :max="31"
                :precision="0">
            </el-input-number>日

            <div slot="footer" class="dialog-footer">
				<el-button @click="insuranceVisible = false">取消</el-button>
			    <el-button type="primary" @click="submitInsurance">确定</el-button>
			</div>
        </el-dialog>

        <el-dialog
            title="重设时间"
            class="reset-time"
            width="400px"
            :visible.sync="resetVisible"
            :close-on-click-modal="false">
            <span>提醒日期：</span>
            <el-input-number 
                class="input-number-text"
                v-model="timeParam.month" 
                controls-position="right" 
                :min="1" 
                :max="12"
                :precision="0">
            </el-input-number>月
            <el-input-number 
                class="input-number-text"
                v-model="timeParam.day" 
                controls-position="right" 
                :min="1" 
                :max="31"
                :precision="0">
            </el-input-number>日

            <div slot="footer" class="dialog-footer">
				<el-button @click="resetVisible = false">取消</el-button>
			    <el-button type="primary" @click="submitTime">确定</el-button>
			</div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        modelList: {
            type: Array,
            default: function () {
                return [{id: 0, name: '全部车型'}]
            }
        },
    },
    data() {
        return {
            resetVisible: false, // 重设时间
            insuranceVisible: false, // 保险处理
            rowLen: 0, // 要处理数据的长度
            totalNumber: 0, // 总条数
            activePanel: 'insuraace', // 默认标签
            listData: [], // 提醒列表
            selected: [], // 选中的数据
            timeList: [{id: 1, name: '一周内'}, {id: 2, name: '一月内'}, {id: 3, name: '两月内'}], // 状态列表
            stateList: ['使用中', '闲置', '停用', '损坏', '报废'], // 车辆状态
            loading: {
                status: false, // 是否显示 loading
                txt: '获取数据...' // loading 标题
            },
            listParam: {
                timeId: null,
                modeId: 0, // 车型id
                keyword: undefined,
                pageSize: 10,
                pageIndex: 1
            },
            timeParam: {
                year: undefined,
                month: undefined,
                day: undefined,
                id: undefined,
                number: undefined,
                dead_line: undefined
            },
            insuranceParam: {
                id: undefined,
                number: undefined,
                date: undefined,
                year: undefined,
                month: undefined,
                day: undefined,
                dead_line: undefined
            }
        }
    },
    created() {
        this.getList();
        // this.getModel();
    },
    methods: {
        /**
         * 获取强险提醒列表
         */
        getList() {
            this.loading.status = true;

            let success = (res=>{
                this.loading.status = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })

            let dead_line = undefined;
            
            if (this.listParam.timeId) {
                dead_line = this.timeList.filter(item => item.id == this.listParam.timeId)[0].time;
            }
            let param = {
                type: 2,
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize,
                car_type: this.listParam.modeId,
                keyword: this.listParam.keyword,
                dead_line
            }

            this.$ajax.get('api/car/insurancelists', {params: param, func:{success: success}})
        },
        /**
         * 获取车型列表
         */
        getModel() {
            let success = (res=>{
                this.modelList = res.data;
            })

            this.$ajax.get('api/', {func:{success: success}})
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.listParam.pageIndex = 1;
            this.getList();
        },
        /**
         * 重置列表
         */
        resetList() {
            this.listParam = {
                timeId: null,
                modeId: 0,
                keyword: undefined,
                pageSize: 10,
                pageIndex: 1
            }

            this.getList();
        },
        /**
         * 当前时间添加 n 年
         */
        getNewYear(n, date) {
            let date1 = new Date(date);
            date1.setFullYear(date1.getFullYear() + n); 
            date1.setDate(date1.getDate() - 1); 

            return date1.toLocaleDateString();
        },
        /**
         * 是否处理该数据
         * @param {Object} obj 要处理数据
         */
        handleInsurance(obj) {
            let date = this.getNewYear(1, obj.dead_line);
            let arr = date.split('/');

            this.insuranceVisible = true;
            this.insuranceParam.id = obj.id;
            this.insuranceParam.number = obj.number;
            this.insuranceParam.date = 1;
            this.insuranceParam.year = +arr[0];
            this.insuranceParam.month = +arr[1];
            this.insuranceParam.day = +arr[2];
            this.insuranceParam.dead_line = obj.dead_line;
        },
        /**
         * 改变续期时间
         */
        changeDate(val) {
            let date = this.getNewYear(val, this.insuranceParam.dead_line);
            let arr = date.split('/');

            this.insuranceParam.year = +arr[0];
            this.insuranceParam.month = +arr[1];
            this.insuranceParam.day = +arr[2];
        },
        /**
         * 保存保险处理
         */
        submitInsurance() {
            this.insuranceParam.day = this.insuranceParam.day < 10 ? '0' + this.insuranceParam.day : this.insuranceParam.day;
            this.insuranceParam.month = this.insuranceParam.month < 10 ? '0' + this.insuranceParam.month : this.insuranceParam.month;

            let date = this.insuranceParam.year + '-' + this.insuranceParam.month + '-' + this.insuranceParam.day;
            let params = [{
                car_id: this.insuranceParam.id,
                car_number: this.insuranceParam.number
            }]

            this.handleData(params, date);
        },
        /**
         * 重设时间
         * @param {Object} obj 要处理数据
         */
        resetTime(obj) {
            let arr = obj.dead_line.split('-');

            this.resetVisible = true;
            this.timeParam = {
                year: +arr[0],
                month: +arr[1],
                day: +arr[2],
                id: obj.car_id,
                number: obj.number,
                dead_line: obj.dead_line
            }
        },
        /**
         * 保存重设时间
         */
        submitTime() {
            this.timeParam.day = this.timeParam.day < 10 ? '0' + this.timeParam.day : this.timeParam.day;
            this.timeParam.month = this.timeParam.month < 10 ? '0' + this.timeParam.month : this.timeParam.month;

            let date = this.timeParam.year + '-' + this.timeParam.month + '-' + this.timeParam.day;
            let params = [{
                car_id: this.timeParam.id,
                car_number: this.timeParam.number
            }]

            this.handleData(params, date);
        },
        /**
         * 是否确定批量处理
         */
        handleAllConfirm() {
            if(this.selected.length === 0) {
                this.$message.warning("请选择要处理的项");
                return false;
            }

            let yes = (res => {
                let ids = [];
                this.rowLen = this.selected.length;

                this.selected.forEach(item => {
                    ids.push({
                        car_id: item.id,
                        car_number: item.number
                    });
                })

                this.handleData(ids);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '批量处理默认续期一年，是否继续？'});
        },
        /**
         * 处理数据
         * @param {Number/Array} 要处理数据的 id
         */
        handleData(item, falg) {
            this.loading.status = true;

            let success = (res => {
                this.insuranceVisible = false;
                this.resetVisible = false;
                this.$message.success(res.msg);
                
                if (this.listData.length === this.rowLen) {
                    if (this.listParam.pageIndex > 1) {
                        this.listParam.pageIndex-- ;
                    } else {
                        this.listParam.pageIndex = 1;
                    }
                }

                this.getList();
            });
            let fail = (res =>{
                let note = '';
                let msg = res.msg;

                if (Array.isArray(msg)) {
                    msg.forEach(item => {
                        note += item + '<br/><br/>';
                    })
                }

                this.$message({
                    type: 'error',
                    dangerouslyUseHTMLString: true,
                    message: note
                });

                this.getList();
            }) 
            let params = {
                car: item,
                type: 2
            }

            if (falg) {
                params.dead_line = falg;
            }

            this.$ajax.post('api/car/insurance', params, {func: {success: success, fail: fail}})
        },
        /**
         * 切换标签页
         * @param {String} name 标签名字
         */
        changePanel(name) {
            this.activePanel  = name;
        },
        /**
         * 列表数据多选
         * @param {Array} val 选中数据的数组
         */
        tableSelectionChange(val) {
            this.selected = val;
        },
        /**
         * 设置每页中显示的数据数量
         * @param {Number} val 每页数据条数
         */
        changeCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 切换到第几页数据
         * @param {Number} val 页数
         */
        changeCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
    },
}
</script>

<style lang="scss">
.business-insurance {
    .input-number-text {
        margin: 10px 8px 50px 3px;
        width: 60px;

        >span {
            display: none;
        }

        input {
            padding-left: 20px !important;
            padding-right: 20px !important;
            text-align: center
        }
    }

    .renewal {
        display: inline-block;
        width: 70px;
    }

    .renewal + div {
        margin-bottom: 20px;
    }
}
</style>